<template>
  <div>
    <div>
      <el-steps
        align-center
        :space="200"
        :active="active"
        finish-status="success"
      >
        <el-step title="基本信息" />
        <el-step title="商品参数" />
        <el-step title="商品属性" />
        <el-step title="商品图片" />
        <el-step title="商品内容" />
        <el-step title="完成" />
      </el-steps>
    </div>
    <div>
      <el-tabs
        tab-position="left"
        :v-model="active1"
        @tab-click="next1"
        class="demo-tabs"
      >
        <el-tab-pane label="基本信息" name="0">
          <div>
            <div class="title">
              <span class="title-span">*</span>
              <span class="title-span2">商品名称</span>
            </div>
            <el-input v-model="input" />
            <div class="title">
              <span class="title-span2">商品价格</span>
            </div>
            <el-input-number
              v-model="num"
              :min="1"
              :max="10"
              controls-position="right"
              size="large"
              @change="handleChange"
            />
            <div class="title">
              <span class="title-span">*</span>
              <span class="title-span2">商品重量</span>
            </div>
            <el-input-number
              v-model="num1"
              :min="1"
              :max="10"
              controls-position="right"
              size="large"
              @change="handleChange"
            />
            <div class="title">
              <span class="title-span">*</span>
              <span class="title-span2">商品数量</span>
            </div>
            <el-input-number
              v-model="num2"
              :min="1"
              :max="10"
              controls-position="right"
              size="large"
              @change="handleChange"
            />
            <div class="title">
              <span class="title-span">*</span>
              <span class="title-span2">商品分类</span>
            </div>
            <el-cascader
              v-model="value"
              :options="cateList"
              @change="handleChange"
              :props="cateProps"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="商品参数" name="1">Config</el-tab-pane>
        <el-tab-pane label="商品属性" name="2">Role</el-tab-pane>
        <el-tab-pane label="商品图片" name="3">
            <el-button type="primary">上传图片</el-button>
        </el-tab-pane>
        <el-tab-pane label="商品内容" name="4">
            <QuillEditor theme="snow" class="richText" v-model:content="addForm.introduce" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { Edit, Delete, Search, InfoFilled } from "@element-plus/icons-vue";
import { categoriesList } from "../tools/ajax";
import { QuillEditor } from '@vueup/vue-quill'

const active = ref(0);
const active1 = ref(0);
const input = ref("");
const num = ref(1);
const num1 = ref(1);
const num2 = ref(1);
const value = ref([]);

const cateList = reactive([]);
const cateProps = {   //展示分类数据的配置选项
        expandTrigger: 'hover',
        label: 'cat_name',
        value: 'cat_id',
        children: 'children'
    }
const addForm = reactive({
    goods_cat: [],
    pics: [],
    attrs: [],
    introduce: ""
}) // 表单数据

categoriesList().then((res) => {
  console.log(res);
  cateList.push(...res.data);
});

addForm.introduce = addForm.introduce.ops && addForm.introduce.ops[0].insert
function next1(pane) {
  // console.log(pane.props.name);
  if (active.value++ > 5) {
    active.value = 0;
  }
  active.value = pane.props.name * 1;
}
</script>
<style lang="less" scoped>
.title {
  width: 100px;
  padding: 20px 2px;
  .title-span {
    color: red;
  }
  .title-span2 {
    display: inline-block;
    font-size: 14px;
  }
}
.el-input-number {
  width: 1200px;
}
</style>